<template>
  <view class="layout pageBg">
    <custom-nav-bar title="推荐"></custom-nav-bar>
    <view class="banner">
      <swiper indicator-dots indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="#fff" autoplay circular>
        <swiper-item v-for="item in data.bannerList">
          <image :src="item.picurl" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>
    
    <view class="notice f fac fpj">
      <view class="left f fac">
        <uni-icons type="sound-filled" size="20"></uni-icons>
        <text class="text">公告</text>
      </view>
      <view class="center f1">
        <swiper autoplay interval="1500" duration="300" circular vertical>
          <swiper-item v-for="item in 1" @click="goNotice">常见问题</swiper-item>
        </swiper>
      </view>
      <view class="right">
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>
    </view>
    
    <view class="select">
      <common-title title="每日推荐">
        <view class="op f fac fpc">
          <uni-icons style="margin-right: 4rpx;" type="calendar" size="20"></uni-icons>
          <uni-dateformat :date="Date.now()" format="M月d日"></uni-dateformat>
        </view>
      </common-title>
      <view class="content">
        <scroll-view class="scroll" scroll-x>
          <view class="box" v-for="item in data.recommendList" @click="goImageDetail(item)">
            <image :src="item.smallPicurl" mode="aspectFill"></image>
          </view>
        </scroll-view>
      </view>
    </view>
    
    <view class="theme">
      <common-title title="专题精选">
        <navigator url="" class="more">More+</navigator>
      </common-title>
      <view class="content">
        <theme-item v-for="item in data.classifyList" :data="item"></theme-item>
        <theme-item :isMore="true"></theme-item>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, reactive } from "vue"
import http from "@/api/api.js"

const data = reactive({
  bannerList: [],
  recommendList: []
})

onMounted(() => {
  getBanner()
  getRecommend()
  getClassify()
})
// 获取轮播图
const getBanner = () => {
  http.getBanner().then(res => {
    data.bannerList = res.data
  })
}

// 每日推荐
const getRecommend = () => {
  http.getRecommend().then(res => {
    data.recommendList = res.data
  })
}

// 专题精选（分类）
const getClassify = () => {
  http.getClassify({select: true}).then(res => {
    data.classifyList = res.data
  })
}
  
// 去往图片详情
const goImageDetail = () => {
  uni.navigateTo({
    url: '/pages/preview/preview'
  })
}

// 去往公告页面
const goNotice = () => {
  uni.navigateTo({
    url: '/pages/notice/notice'
  })
}
</script>

<style lang="scss" scoped>
  .layout {
    .banner {
      width: 750rpx;
      padding: 30rpx 0;
      swiper {
        width: 750rpx;
        height: 340rpx;
        &-item {
          width: 100%;
          height: 100%;
          padding: 0 30rpx;
          image {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }
        }
      }
    }
    .notice {
      width: 690rpx;
      height: 80rpx;
      line-height: 80rpx;
      margin: 0 auto;
      padding: 0 20rpx;
      background-color: #f9f9f9;
      border-radius: 80rpx;
      .left {
        :deep() {
          .uni-icons {
            color: $main-theme-color !important;
          }
        }
        .text {
          color: $main-theme-color;
          font-weight: 600;
          font-size: 28rpx;
        }
      }
      .center {
        margin: 0 40rpx;
        height: 100%;
        swiper {
          height: 100%;
          &-item {
            width: 100%;
            height: 100%;
            font-size: 30rpx;
            color: #666;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .select {
      padding: 0 30rpx;
      margin-top: 50rpx;
      .op {
        color: $main-theme-color;
        :deep() {
          .uni-icons {
            color: $main-theme-color !important;
          }
        }
      }
      .content {
        width: 720rpx;
        margin-top: 30rpx;
        .scroll {
          white-space: nowrap;
          width: 100%;
          .box {
            width: 200rpx;
            height: 444rpx;
            display: inline-block;
            margin-right: 16rpx;
            &:last-child {
              margin-right: 30rpx;
            }
            image {
              width: 100%;
              height: 100%;
              border-radius: 10rpx;
            }
          }
        }
      }
    }
    .theme {
      margin-top: 50rpx;
      width: 100%;
      padding: 0 30rpx;
      padding-bottom: 40rpx;
      .content {
        margin-top: 30rpx;
        display: grid;
        gap: 15rpx;
        grid-template-columns: repeat(3, 1fr);
      }
    }
  }
</style>